<html>
<head>
<style type="text/css">
	body {
		height: 100%;
	}
	
</style>

<title>Argon Alpha Alpha</title>
        <link rel="stylesheet" href="http://pangbo.org/argon/jslog/jslog.css" />
        <link rel="apple-touch-icon" href="assets/sample_icon_57x57.png" />
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
        <meta name="arenabled" />
        
</head>
<body>
	<!--// include the script //-->
	<script src="http://pangbo.org/argon/jslog/jslog.js"></script>
    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>	
    <script src="http://argon.gatech.edu/argon_o.js"></script>
	<script src="http://pangbo.org/mobile/models/ColladaLoader.js"></script>	
	<script>
		defenseGame ={
			geoObject:null,
			enemies:null,
			model:null,
			cube:null,
			loaded:null,
			totleEnemy:null,
			enemiesDir:null,
			enemiesPos:null,
			scene:null,
			camera:null,
			renderer:null,
						
			initialization:function(){
				var width = 320;
				var height = 568;
				
				scene = new THREE.Scene();
				camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
				scene.add(camera);
				
				var light = new THREE.PointLight(0xffffff);
				light.position.set(0,0,0);
				scene.add(light);
				
				for(var i=0; i< totleEnemy; i++){
					scene.add(enemies[i]);
				}

				renderer = new THREE.WebGLRenderer();
				renderer.setSize( width, height );
				document.body.appendChild( renderer.domElement );
				//geoObject.add(light);
				//ARGON.World.add( geoObject );
				//ARGON.onRender = defenseGame.update;
	
			},
			loadModels:function(){
				loader = new THREE.ColladaLoader();
				loader.options.convertUpAxis = true;
				totleEnemy = 20;
				enemies = new Array();
				enemiesDir = new Array();
				enemiesPos = new Array();
			
				loader.load( 'models/beholder/beholder.dae', function ( collada ) {
					for(var i=0; i< totleEnemy; i++){		
						model = collada.scene.clone();
						model.scale.x = model.scale.y = model.scale.z = 30;	
						fai = Math.random()*6.28;
						sita = Math.random()*3.14*50/180;
						model.rotation.x = Math.random()*3.14;
						model.position.x = 500*Math.cos(sita)*Math.sin(fai);
						model.position.z = 500*Math.sin(sita);
						model.position.y = 500*Math.cos(sita)*Math.cos(fai);
						//model.position.x = 500-i*100;
						dir = new Object();
						pos = new Object();
						dir.phi = (Math.random()-0.5)/50;
						dir.theta = (Math.random()-0.5)/50;
						enemiesDir[i] = dir;
						pos.phi = fai;
						pos.theta = sita;
						enemiesPos[i] = pos;
						enemies[i] = model;
						
					}
					defenseGame.initialization();
					defenseGame.draw();
				});				
			},
			setGeoObject:function(){				
			},
			draw:function(){
				requestAnimationFrame(defenseGame.draw);
				defenseGame.update();
				renderer.render(scene, camera);				
			},
			update:function(){
				var da = ARGON.deviceAttitude;
				var str = da[0] + " " + da[1] + " " + da[2] + " " + da[3] + "\n "
				+da[4] + " " + da[5] + " " + da[6] + " " + da[7] + "\n "
				+da[8] + " " + da[9] + " " + da[10] + " " + da[11] + "\n "
				+da[12] + " " + da[13] + " " + da[14] + " " + da[15] + "\n ";
				var matrix = new THREE.Matrix4(da[0],da[1],da[2],da[3],da[4],da[5],da[6],da[7],da[8],da[9],da[10],da[11],da[12],da[13],da[14],da[15]);
				var rotation = matrix.decompose()[1];
				
				//x: direct to north, y: direct to z: direct to up
				console.log("x: "+(-rotation.x.toFixed(2))+"y: "+(-rotation.y.toFixed(2))+"z: "+(-rotation.z.toFixed(2)))
				rotation.normalize()
				var qw = rotation.w;
				var qx = rotation.x;
				var qy = rotation.y;
				var qz = rotation.z;
				var s = Math.sqrt(1-qw*qw);
				var x,y,z;
				if(s<0.0001){
					x = qx;
					y = qy;
					z = qz;
				}
				else{
					x = qx/s;
					y = qy/s;
					z = qz/s;
				}
				
				camera.lookAt(new THREE.Vector3(-qx,-qy,-qz).normalize());
				//defenseGame.cube.position.x +=10;
				for(var i=0; i< totleEnemy; i++){
					//console.log(enemiesPos[i].theta);
					if(enemiesPos[i].theta>3.14*50/180 || enemiesPos[i].theta<0)
					{
						enemiesDir[i].theta = -enemiesDir[i].theta;
					}
					else if(Math.random()<0.01){
						enemiesDir[i].phi = (Math.random()-0.5)/50;
						enemiesDir[i].theta = (Math.random()-0.5)/50;
					}
					enemiesPos[i].theta +=enemiesDir[i].theta;
					enemiesPos[i].phi +=enemiesDir[i].phi;
					
					enemies[i].position.x = 500*Math.cos(enemiesPos[i].theta)*Math.sin(enemiesPos[i].phi);
					enemies[i].position.z = 500*Math.sin(enemiesPos[i].theta);
					enemies[i].position.y = 500*Math.cos(enemiesPos[i].theta)*Math.cos(enemiesPos[i].phi);
					enemies[i].rotation.x+=0.1;
					enemies[i].rotation.y+=0.1;
				}
				//camera.lookAt(new THREE.Vector3(enemies[0].position.x,enemies[0].position.y,enemies[0].position.z).normalize());
			}
		}
	
	</script>
	
	<script>
		document.addEventListener("AR.ArgonReadyEvent", defenseGame.loadModels());
		//defenseGame.draw();
			
    </script>
	
	

</body>
</html> 